import { Callout } from "nextra/components";
import { Frame, CopilotKitCSS } from "@/components";

<CopilotKitCSS />

# Customize Look & Feel

Hover over the different UI elements below to see the CSS variable names:

<br/>

export const handleMouseMove = (e) => {
  const tooltip = document.querySelector('.tooltip');
  tooltip.style.display = 'block';
  const rect = tooltip.parentElement.getBoundingClientRect();
  tooltip.style.left = `${e.clientX - rect.left + 15}px`;
  tooltip.style.top = `${e.clientY - rect.top + 15}px`;

  let element = e.target;

  while (element && element !== document.body) {
    console.log(element.classList);
    if (element.classList.contains('copilotKitHeader')) {
      tooltip.innerHTML = '<b>--copilot-kit-primary-color</b>: Header background color.<br/><br/><b>--copilot-kit-contrast-color</b>: Header foreground color.';
      return;
    } else if (element.classList.contains('copilotKitAssistantMessage')) {
      tooltip.innerHTML = '<b>--copilot-kit-secondary-color</b>: Assistant message background color.<br/><br/><b>--copilot-kit-secondary-contrast-color</b>: Assistant message foreground color.';
      return;
    } else if (element.classList.contains('copilotKitUserMessage')) {
      tooltip.innerHTML = '<b>--copilot-kit-primary-color</b>: User message background color.<br/><br/><b>--copilot-kit-contrast-color</b>: User message foreground color.';
      return;
    } else if (element.classList.contains('copilotKitMessages')) {
      tooltip.innerHTML = '<b>--copilot-kit-background-color</b>: Chat window background color.<br/><br/><b>--copilot-kit-scrollbar-color</b>: Chat window scrollbar color.<br/><br/><b>--copilot-kit-separator-color</b>: Bottom separator color.';
      return;
    } else if (element.classList.contains('micButton')) {
      tooltip.innerHTML = '<b>--copilot-kit-primary-color</b>: Active button color';
      return;
    } else if (element.classList.contains('sendButton')) {
      tooltip.innerHTML = '<b>--copilot-kit-muted-color</b>: Muted button color';
      return;
    } else if (element.classList.contains('copilotKitInput')) {
      tooltip.innerHTML = '<b>--copilot-kit-muted-color</b>: Placeholder color.';
      return;
    }
    element = element.parentElement;
  }

  tooltip.style.display = 'none';
};

export const handleMouseLeave = (e) => {
  const tooltip = document.querySelector('.tooltip');
  tooltip.style.display = 'none';
};

<div className="tooltip">Close CopilotKit</div>
<Frame> 
  <div className="" onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave} style={{
    width: "384px",
    cursor: "pointer"
  }}> 
    <div className="open">
      <div className="copilotKitHeader" >
        <div>CopilotKit</div>
        <button aria-label="Close">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            strokeWidth="1.5"
            stroke="currentColor"
            width={24}
            height={24}
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              d="M6 18L18 6M6 6l12 12"
            />
          </svg>
        </button>      
      </div>
      <div className="copilotKitMessages">
        <div className="copilotKitMessage copilotKitAssistantMessage">Hi you! 👋 I can help you create a presentation on any topic.</div>
        <div className="copilotKitMessage copilotKitUserMessage">Hello CopilotKit!</div>     
      </div>
      <div className="copilotKitInput">
        <input
          placeholder="Type a message..."
          style={{ overflow: "auto", resize: "none", maxHeight: 100, height: 20 }}
          rows={1}
          defaultValue={""}
          disabled="disabled"
        />
        <div className="copilotKitInputControls">
          <button className="micButton">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              strokeWidth="1.5"
              stroke="currentColor"
              className="w-6 h-6"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M12 18.75a6 6 0 0 0 6-6v-1.5m-6 7.5a6 6 0 0 1-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 0 1-3-3V4.5a3 3 0 1 1 6 0v8.25a3 3 0 0 1-3 3Z"
              />
            </svg>
          </button>
          <button className="sendButton" disabled="disabled">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              width={24}
              height={24}
              strokeWidth="1.5"
              stroke="currentColor"
              style={{}}
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"
              />
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</Frame>

The easiest way to change the colors is to override CopilotKit CSS variables. You can simply wrap CopilotKit in a div and override the CSS variables. CopilotKitCSSProperties will have the variable names as types:

```tsx
<div
  style={
    {
      "--copilot-kit-primary-color": "#222222",
    } as CopilotKitCSSProperties
  }
>
  <CopilotSidebar .../>
</div>
```

## Custom CSS

In addition to customizing the colors, the CopilotKit CSS is structured in a way that you can easily customize the CSS classes.

Have a look at the CSS classes defined [here](https://github.com/CopilotKit/CopilotKit/blob/main/CopilotKit/packages/react-ui/src/css/).

For example:

```css fileName="CSS"
.copilotKitButton {
  border-radius: 0;
}
```

## Custom Icons

You can customize the icons by passing the `icons` property to the `CopilotSidebar`, `CopilotPopup` or `CopilotChat` component.

Below is a list of customizable icons:

- `openIcon`: The icon to use for the open chat button.
- `closeIcon`: The icon to use for the close chat button.
- `headerCloseIcon`: The icon to use for the close chat button in the header.
- `sendIcon`: The icon to use for the send button.
- `activityIcon`: The icon to use for the activity indicator.
- `spinnerIcon`: The icon to use for the spinner.
- `stopIcon`: The icon to use for the stop button.
- `regenerateIcon`: The icon to use for the regenerate button.
- `pushToTalkIcon`: The icon to use for push to talk.

## Custom Labels

To customize labels, pass the `labels` property to the `CopilotSidebar`, `CopilotPopup` or `CopilotChat` component.

Below is a list of customizable labels:

- `initial`: The initial message(s) to display in the chat window.
- `title`: The title to display in the header.
- `placeholder`: The placeholder to display in the input.
- `stopGenerating`: The label to display on the stop button.
- `regenerateResponse`: The label to display on the regenerate button.

## Swapping Out Components

To completely customize the look and feel of CopilotKit, you can swap out the components of the chat window.

The following components can be customized by passing it as properties to the `CopilotChat` component:

- `Window`: The window component that contains the chat.
- `Button`: The button for opening/closing the chat window.
- `Header`: The chat header.
- `Messages`: The chat messages area.
- `Input`: The chat input.
- `ResponseButton`: The button for regenerating a response.

For example, to customize the response button, you can pass a custom component to the `ResponseButton` prop:

<Frame>
  <img src="/images/concepts/customize-look-and-feel/custom-response-button.png" />
</Frame>

```tsx
export function CustomResponseButton({ onClick, inProgress }: ResponseButtonProps) {
  return (
    <div style={{ 
        display: "flex", 
        marginTop: "10px" 
      }}>
      <button
        style={{ 
          flex: 1, 
          border: "1px solid #eee", 
          borderRadius: "4px", 
          marginRight: "5px" 
        }}
      >
        👍
      </button>
      <button style={{ 
        flex: 1, 
        border: "1px solid #eee", 
        borderRadius: "4px" 
      }}>👎</button>
    </div>
  );
};

<CopilotSidebar ResponseButton={CustomResponseButton}>
  // ...
</CopilotSidebar>
```